JS30-Day9-14 Must Know Dev Tools Tricks

教你14個使用 Dev Tools 的技巧，以下內容是記錄了我不知道的技巧

1. 為 console.log 加上 css 樣式

字串最前面加上 %c

console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue');

2. 斷言 console.assert()

括號裡可寫判斷式，第一個參數是 false，就輸出第二個參數的內容

const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'That is wrong!');

3. 印出 DOM 元素 console.dir()

印出 DOM 元素還有其屬性
範例:

console.dir(p);

4. console.groupCollapsed()

用於包覆 console 的內容，可搭配 console.groupEnd() 結束包覆內容
範例:

console.log("outside group");
console.groupCollapsed();
console.log("inside group");
console.groupEnd();
console.log("outside group");

5. console.time()

和 console.timeEnd() 搭配使用，計算此兩行程式內的程式執行時間

console.time('fetching data');
fetch('https://api.github.com/users/wesbos')
  .then(data => data.json())
  .then(data => {
    console.timeEnd('fetching data');
    console.log(data);
  });

JS30-Day11-Custom HTML5 Video Player

實作一個影片撥放器

1. 選取 HTML data 屬性

在教學中看到用 querySelectorAll 選取標籤內的 data，以前不知道可以這樣選取，紀錄一下

const skipButtons = player.querySelectorAll('[play-skip]');

2. timeupdate 事件

屬於 Audio/Video 的事件，這裡用來控制影片進度條

3. 小技巧

為了讓滑鼠實際有點擊並拉動進度條時才會成功控制影片進度，所以使用 mouseClick 紀錄點擊狀態，當 mouseClick 為 true 時，才觸發後面 controlBar() 此函式

progress.addEventListener('mousemove', (e) => mouseClick && controlBar(e));

全部練習的程式碼都在此連結:
https://github.com/a90100/JavaScript30